<template>
  <div class="accept_content_card" v-if="dataList && dataList.length > 0">
    <div class="accept_content_card_box">
      <div
        class="accept_content_card_box_signle"
        v-for="(item, index) in dataList"
        :key="index"
        @click="showHand(item)"
      >
        <!-- 状态灯 -->
        <!-- <div v-if="index % 2 == 0" class="accept_content_card_box_signle_status_light_success"></div>
        <div v-else class="accept_content_card_box_signle_status_light_error"></div> -->

        <a-popover v-if="item.isTimeout" placement="rightTop">
          <div class="accept_content_card_box_signle_status_light_error"></div>
          <template v-if="item.state == '1'" slot="content">
            <span>{{
              item.enddate
                ? `${item.enddate.substring(0, 4)}年${item.enddate
                  .substring(5, 7)
                  .replace(/\b(0+)/gi, '')}月${item.enddate.substring(8, 10).replace(/\b(0+)/gi, '')}日截止
                        ${item && item.leftDay > 0 ? '当前剩余' + item.leftDay + '天工作日' : ''}`
                : '无截止日期'
            }}</span>
          </template>
        </a-popover>

        <div v-else class="accept_content_card_box_signle_status_light_success"></div>

        <!-- 数据展示 -->
        <div class="accept_content_card_box_info">
          <div class="accept_content_card_box_info_label">
            <span class="accept_content_card_box_info_label_left_title beyond_hiding">
              <!-- 行政申请 -->
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ item.prtype_text }}</span>
                </template>
                <span>{{ item.prtype_text }}</span>
              </a-tooltip>
            </span>

            <span class="accept_content_card_box_info_label_right_title">
              {{ transTime(item.subtime) }}
            </span>
          </div>
        </div>
        <div class="accept_content_card_box_info_content">
          <div
            v-for="(column, columnIndex) in columns"
            :key="columnIndex"
            class="accept_content_card_box_info_content_background"
          >
            <!-- 申请号 -->
            <div class="accept_content_card_box_info_content_div">
              <div class="accept_content_card_box_info_content_div_left">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ column.title }}</span>
                  </template>
                  <span>{{ column.title }}</span>
                </a-tooltip>
              </div>
              <div class="accept_content_card_box_info_content_div_right">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ item[column.key] }}</span>
                  </template>
                  <span>{{ item[column.key] }}</span>
                </a-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 显示分页控件 -->
    <div class="accept_content_page_controller">
      <span class="accept_content_page_controller_total"> {{ pagination.showTotal(pagination.total) }} </span>
      <a-pagination
        class="accept_content_page_controller_div"
        v-model="pagination.current"
        :page-size-options="pagination.pageSizeOptions"
        :total="pagination.total"
        show-size-changer
        :page-size="pagination.pageSize"
        @change="onPageChange"
        @showSizeChange="onPageChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span>{{ props.value }} 条/页</span>
        </template>
      </a-pagination>
    </div>
  </div>
  <a-empty v-else style="margin-top: 40px" />
</template>

<script>
import moment from 'moment'
export default {
  props: {
    // 后台查询的数据
    dataList: {
      type: Array,
      default: [],
      required: true
    },
    // 分页配置参数
    pagination: {
      type: Object,
      default: {},
      required: true
    },
    // 表格字段类型
    ucolumns: {
      type: Array,
      default: [],
      required: true
    },
    // 对应的业务类型
    type: {
      type: Object,
      default: false,
      required: true
    }
  },
  data () {
    return {
      currentTab: 'table',
      columns: []
    }
  },
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue')
  },
  computed: {},
  created () {
    // 去除当前传入的表格的序号和操作字段
    this.columns = []
    if (this.ucolumns) {
      for (const column of this.ucolumns) {
        if (column.key != 'index' && column.key != 'action') {
          this.columns.push(column)
        }
      }
    }
  },
  watch: {
    ucolumns: {
      handler (val, oval) {
        this.columns = []
        for (const column of val) {
          if (column.key != 'index' && column.key != 'action') {
            this.columns.push(column)
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {},
  update () {},
  methods: {
    onPageChange (page, pageSize) {
      this.pagination.current = page
      this.pagination.pageSize = pageSize
      this.$emit('tableChange', this.pagination)
    },
    transTime (val) {
      return val ? moment(val).format('YYYY-MM-DD') : ''
    },
    showHand (item) {
      this.$emit('showHand', item, this.type.editType)
    }
  }
}
</script>

<style lang="scss" scoped>
// 隐藏卡片滚动条
.accept_content_card_box_info_content::-webkit-scrollbar {
  width: 0;
}

::v-deep .accept_content_card_box_info_content_div {
  display: flex;
}

::v-deep .accept_content_card_box_info_content_div_left {
  flex: 1;
}

::v-deep .accept_content_card_box_info_content_div_right {
  flex: 1;
}
</style>
